<!--
操作节点：
    新增节点：
        1. 创建元素节点
        使用 createElement 方法创建一个元素.options 参数暂不关注.
        var element = document.createElement(tagName[, options]);   tagName相当于标签

        2. 把元素节点插入到 dom 树中
        2.1 使用 appendChild 将节点插入到指定节点的最后一个孩子之后
            element.appendchild(achi1d)

        2.2 使用 insertBefore 将节点插入到指定节点之前
            var insertedNode = parentNode.insertBefore(newNode, referenceNode);
            参数(插入的节点，节点位置（为null时，默认节点位置是指定节点最后一个孩子）)


        注意1: 如果针对一个节点插入两次,则只有最后一次生效(相当于把元素移动了)
        注意2: 一旦一个节点插入完毕,再针对刚刚的节点对象进行修改,能够同步影响到 DOM 树中的内容
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>

        <!-- 指定插入节点到这里 -->
        <p class="p1">这是一个 p 标签</p>
        <p class="p2">这是一个 p 标签</p>
        <p class="p3">这是一个 p 标签</p>
        <p>这是一个 p 标签</p>
        <p>这是一个 p 标签</p>
        <!-- 此时节点将会被插入到这里 -->
    </div>
</body>
<script>
    // 1.
    // 创建节点
    let element=document.createElement("h3");
    element.innerHTML="这是我创建的一个新节点";


    let div=document.querySelector("div");
    
    // 插入到指定节点的最后一个孩子之后
    div.appendChild(element);

    // 2.
    let new_node=document.createElement("p");
    new_node.innerHTML="这是一个指定插入的节点";

    div.insertBefore(new_node,document.querySelector(".p1"));
    // 验证 注意1
    div.insertBefore(new_node,document.querySelector(".p2"));
    div.insertBefore(new_node,document.querySelector(".p3"));// 只有最后一次生效


    
</script>
</html>